<template>
	<div>
		<Card dis-hover>
			<div class="page-body">
				<Form ref="queryForm" :label-width="100" label-position="left" inline>
					<Row :gutter="16">
						<i-col span="8">
							<FormItem :label="L('Keyword')+':'" style="width:100%">
								<Input v-model="pagerequest.keyword" :placeholder="L('TenancyName')+'/'+L('Name')" />
							</FormItem>
						</i-col>
						<i-col span="8">
							<FormItem :label="L('IsActive')+':'" style="width:100%">
								<!--Select should not set :value="'All'" it may not trigger on-change when first select 'NoActive'(or 'Actived') then select 'All'-->
								<Select :placeholder="L('Select')" @on-change="isActiveChange">
									<Option value="All">{{L('All')}}</Option>
									<Option value="Actived">{{L('Actived')}}</Option>
									<Option value="NoActive">{{L('NoActive')}}</Option>
								</Select>
							</FormItem>
						</i-col>
					</Row>
					<Row>
						<Button @click="create" icon="android-add" type="primary" size="large">{{L('Add')}}</Button>
						<Button
							icon="ios-search"
							type="primary"
							size="large"
							@click="getpage"
							class="toolbar-btn"
						>{{L('Find')}}</Button>
					</Row>
				</Form>
				<div class="margin-top-10">
					<Table :loading="loading" :columns="columns" :no-data-text="L('NoDatas')" border :data="list"></Table>
					<Page
						show-sizer
						class-name="fengpage"
						:total="totalCount"
						class="margin-top-10"
						@on-change="pageChange"
						@on-page-size-change="pagesizeChange"
						:page-size="pageSize"
						:current="currentPage"
					></Page>
				</div>
			</div>
		</Card>
		<create-tenant v-model="createModalShow" @save-success="getpage"></create-tenant>
		<edit-tenant v-model="editModalShow" @save-success="getpage"></edit-tenant>
	</div>
</template>
<script lang="ts">
	import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
	import Utils from "@/core/utils/Utils";
	import AppBase from "@/core/utils/AppBase";
	import PageRequest from "@/store/entities/page-request";
	import CreateTenant from "./create-tenant.vue";
	import EditTenant from "./edit-tenant.vue";

	class PageTenantRequest extends PageRequest {
		keyword = "";
		isActive: boolean | null = null;
	}

	@Component({
		components: { CreateTenant, EditTenant }
	})
	export default class Tenants extends AppBase {
		edit() {
			this.editModalShow = true;
		}

		pagerequest: PageTenantRequest = new PageTenantRequest();

		createModalShow = false;
		editModalShow = false;
		get list() {
			return this.$store.state.tenant.list;
		}
		get loading() {
			return this.$store.state.tenant.loading;
		}
		create() {
			this.createModalShow = true;
		}
		isActiveChange(val: string) {
			if (val === "Actived") {
				this.pagerequest.isActive = true;
			} else if (val === "NoActive") {
				this.pagerequest.isActive = false;
			} else {
				this.pagerequest.isActive = null;
			}
		}
		pageChange(page: number) {
			this.$store.commit("tenant/setCurrentPage", page);
			this.getpage();
		}
		pagesizeChange(pagesize: number) {
			this.$store.commit("tenant/setPageSize", pagesize);
			this.getpage();
		}
		async getpage() {
			this.pagerequest.maxResultCount = this.pageSize;
			this.pagerequest.skipCount = (this.currentPage - 1) * this.pageSize;

			await this.$store.dispatch({
				type: "tenant/getAll",
				data: this.pagerequest
			});
		}
		get pageSize() {
			return this.$store.state.tenant.pageSize;
		}
		get totalCount() {
			return this.$store.state.tenant.totalCount;
		}
		get currentPage() {
			return this.$store.state.tenant.currentPage;
		}
		columns = [
			{
				title: this.L("TenancyName"),
				key: "tenancyName"
			},
			{
				title: this.L("Name"),
				key: "name"
			},
			{
				title: this.L("IsActive"),
				render: (h: any, params: any) => {
					return h("span", params.row.isActive ? this.L("Yes") : this.L("No"));
				}
			},
			{
				title: this.L("Actions"),
				key: "Actions",
				width: 150,
				render: (h: any, params: any) => {
					return h("div", [
						h(
							"Button",
							{
								props: {
									type: "primary",
									size: "small"
								},
								style: {
									marginRight: "5px"
								},
								on: {
									click: () => {
										this.$store.commit("tenant/edit", params.row);
										this.edit();
									}
								}
							},
							this.L("Edit")
						),
						h(
							"Button",
							{
								props: {
									type: "error",
									size: "small"
								},
								on: {
									click: async () => {
										console.info("object");
										/* this.$Modal.confirm({
													title: this.L("Tips"),
													content: this.L("DeleteTenantConfirm"),
													okText: this.L("Yes"),
													cancelText: this.L("No"),
													onOk: async () => {
														await this.$store.dispatch({
															type: "tenant/delete",
															data: params.row
														});
														await this.getpage();
													}
												}); */
									}
								}
							},
							this.L("Delete")
						)
					]);
				}
			}
		];
		async created() {
			this.getpage();
		}
	}
</script>